<template>
  <span 
    class="el-tag" 
    :class="tagClass"
  >{{ displayText }}</span>
</template>

<script>
export default {
  name: 'JVxeStatusTagCell',
  props: {
    cellValue: {
      type: [String, Number],
      required: true
    }
  },
  computed: {
    displayText() {
      const value = String(this.cellValue);
      const statusMap = {
        '1': '生产中',
        '2': '待质检',
        '3': '已完成',
        '4': '质检不合格'
      };
      return statusMap[value] || '未知状态';
    },
    tagClass() {
      const value = String(this.cellValue);
       const classMap = {
        '1': 'el-tag--blue',    // 生产中-蓝色
        '2': 'el-tag--orange',  // 待质检-橙色
        '3': 'el-tag--green',   // 已完成-绿色
        '4': 'el-tag--red'      // 质检不合格-红色
      };
      return classMap[value] || '';
    }
  }
}
</script>

<style scoped>
/* 基础样式 - 确保垂直水平居中 */
.el-tag {
  display: inline-block;
  padding: 0 8px;
  border-radius: 2px;
  font-size: 12px;
  /* 关键：固定高度与行高一致实现垂直居中 */
  height: 22px;
  line-height: 22px;
  /* 水平居中 */
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* 生产中 - 蓝色（进行中） */
.el-tag--blue {
  background-color: #ecf5ff;  /* 浅蓝背景 */
  color: #1890ff;             /* 深蓝文字（主色） */
  border-color: #b3d8ff;      /* 边框略深于背景 */
}

/* 待质检 - 橙色（待处理） */
.el-tag--orange {
  background-color: #fff7e6;  /* 浅橙背景 */
  color: #fa8c16;             /* 深橙文字 */
  border-color: #ffe8cc;      /* 边框略深于背景 */
}

/* 已完成 - 绿色（成功） */
.el-tag--green {
  background-color: #f0fff4;  /* 浅绿背景 */
  color: #52c41a;             /* 深绿文字 */
  border-color: #b7eb8f;      /* 边框略深于背景 */
}
/* 质检不合格 - 红色（异常） */
.el-tag--red {
  background-color: #fff1f0;  /* 浅红背景 */
  color: #f5222d;             /* 深红文字（警告色） */
  border-color: #ffccc7;      /* 边框略深于背景 */
}
</style>